<!-- 右侧的电影和影院信息-->
<template>
  <div class="movie-right">
    <sn-row-has-two-col :left="10" :right="14">
      <el-image
          class="poster"
          :src="film.filmImg" slot="one-col"/>
      <!-- 电影信息-->
      <div slot="two-col">
        <span class="movie-name">
          {{ film.filmName }}
        </span>
        <!-- 类型 -->
        <div class="margin-bottom margin-top">
          <span class="des">
          类型 :
          </span>
          <span v-for="item in film.filmType" class="type">
            {{ item }}
          </span>
        </div>
        <!-- 时长-->
        <div>
          <span class="des">
            时长 :
          </span>
          <span>
            {{ film.time }}分钟
          </span>
        </div>
      </div>
    </sn-row-has-two-col>
    <!-- 影院-->
    <div class="item">
      <span class="des">
        影院 :
      </span>
      <span class="content">
        {{ film.cinema }}
      </span>
    </div>
    <!-- 影厅-->
    <div class="item">
      <span class="des">
        影厅 :
      </span>
      <span class="content">
        {{ String(film.hall.name).split('<')[0] }}
      </span>
    </div>
    <!-- 版本-->
    <div class="item">
      <span class="des">
        版本 :
      </span>
      <span class="content">
        {{ film.movieLanguageVersion }}
      </span>
    </div>
    <!-- 场次-->
    <div class="item">
      <span class="des">
        场次 :
      </span>
      <span class="content">
        {{ film.session }}
      </span>
    </div>
    <!-- 票价-->
    <div class="item">
      <span class="des">
        票价 :
      </span>
      <span class="content">
        ￥
        {{ film.filmPrice }}
        / 张
      </span>
    </div>
    <!-- 座位-->
    <div class="item choose-seat">
      <sn-row-has-two-col :left="3" :right="21">
         <span class="des" slot="one-col">
          座位 :
        </span>
        <div class="choose-seat-des"
             slot="two-col"
             v-show="film.tickets.length === 0">
          请在左侧选择座位，最多选择5个
        </div>
        <div slot="two-col" v-show="film.tickets.length !== 0">
          <el-tag
              class="margin-right margin-bottom"
              type="danger"
              v-for="item in film.tickets">
            {{ item.des }}
          </el-tag>
        </div>
      </sn-row-has-two-col>
    </div>
    <!-- 优惠-->
    <div>
      <sn-row-has-two-col :left="4" :right="20">
         <span class="des" slot="one-col">
          优惠劵 :
        </span>
        <div class="choose-seat-des"
             slot="two-col"
             v-show="coupon.couponId === 0">
          暂无优惠
        </div>
        <div slot="two-col" v-show="coupon.couponId !== 0">
          <el-tag type="danger">
            优惠{{ coupon.amount }}元
          </el-tag>
        </div>
      </sn-row-has-two-col>
    </div>
    <!-- 总价-->
    <div class="item">
      <span class="des">
        总价 :
      </span>
      <span class="money-icon">
        ￥
      </span>
      <span class="total-price">
        {{ totalPrice }}
      </span>
    </div>
    <!-- 支付-->
    <sn-row-has-two-col class="ensure" :left="12" :right="12">
      <!-- 选择优惠劵-->
      <el-button
          slot="one-col"
          @click="toChooseCoupon"
          type="danger" round style="width: 150px">
        使用优惠劵
      </el-button>
      <!-- 确认选座-->
      <el-button
          slot="two-col"
          @click="toPay"
          type="danger" round style="width: 150px">
        确认选座
      </el-button>
    </sn-row-has-two-col>
    <el-dialog title="优惠券" :visible.sync="couponDialogTableVisible">
      <el-table :data="userCouponData">
        <el-table-column
            align="center"
            property="id"
            label="序号">
        </el-table-column>
        <el-table-column
            align="center"
            property="username"
            label="用户名">
        </el-table-column>
        <el-table-column
            align="center"
            property="couponName"
            label="优惠劵">
        </el-table-column>
        <el-table-column
            align="center"
            property="number"
            label="数量">
        </el-table-column>
        <el-table-column
            align="center"
            property="chooseCoupon"
            label="使用优惠券">
          <template slot-scope="scope">
            <el-radio
                @change="useCoupon(scope.row)"
                v-model="coupon.couponId"
                :label="scope.row.id">
              选择
            </el-radio>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="couponDialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="couponDialogTableVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ChooseMovieInfo",
  computed: {
    totalPrice() {
      return this.film.tickets.length > 0 ? this.film.tickets.length * this.film.filmPrice : 0
    }
  },
  data() {
    return {
      //选中的优惠劵
      coupon: {
        couponId: 0,
        amount: 0
      },
      //是否打开弹窗
      couponDialogTableVisible: false,
      // 场次信息
      film: {
        //放映点名称
        cinema: "花语影院",
        //放映点地址
        hall: "5号放映厅",
        //开始时间
        filmName: "送你一朵小红花",
        filmType: ['生活', '喜剧'],
        filmImg: "https://p0.meituan.net/movie/d33858dbfc207da3b36c0dc7fff7a8bb2028677.jpg@464w_644h_1e_1c",
        filmPrice: 33.50,
        time: 138,
        language: '国语2D',
        session: '今天 2月2 16:20',
        tickets: []
      },
      userCouponData: [
        {
          id: 1,
          username: 'sn',
          couponName: '优惠20元',
          number: 10,
          amount: 20,
        },
        {
          id: 2,
          username: 'sn',
          couponName: '优惠20元',
          number: 10,
          amount: 20,
        },
        {
          id: 3,
          username: 'sn',
          couponName: '优惠20元',
          number: 10,
          amount: 20,
        },
      ]
    }
  },
  created() {
    this.getMovieInfo()
  },
  methods: {
    //使用优惠券
    useCoupon(row) {
      this.$set(this.coupon, 'amount', row.amount)
    },
    toPay() {
      let userId = this.$store.getters.getUser.userId
      if (userId === 0) {
        this.myUtils.toLoginMessage(this)
      } else {
        let {filmName, session, cinema, tickets, hall} = this.film
        if (tickets.length === 0) {
          this.myUtils.showMessage(this, '请在左侧选择座位！！')
          return
        }
        let orderInfo = {
          movieName: filmName,
          field: session,
          cinemaName: cinema,
          tickets,
          hall,
          coupon: this.coupon,
          totalPrice: this.totalPrice
        }
        //初始化vuex中订单数据
        this.$store.commit(this.mutationsTypes.EXCHANGE_ORDER_INFO, {})
        //保存到vuex中
        this.$store.commit(this.mutationsTypes.EXCHANGE_ORDER_INFO, orderInfo)
        //初始化倒计时
        //初始化分
        this.$store.commit(this.mutationsTypes.EXCHANGE_MINUTES, 2)
        //初始化秒
        this.$store.commit(this.mutationsTypes.EXCHANGE_SECONDS, 0)
        //修改时间线激活索引
        this.$store.commit(this.mutationsTypes.EXCHANGE_CREATE_ORDER_STEP_INDEX, 3)
        this.$emit('createOrder', orderInfo)
      }
    },
    //选择优惠券
    toChooseCoupon() {
      let userId = this.$store.getters.getUser.userId
      if (userId === 0) {
        this.myUtils.toLoginMessage(this)
      } else {
        this.couponDialogTableVisible = true
        //TODO 向后端发送请求获取当前用户所有优惠券
        // this.$http({
        //   url: '',
        //   method: 'get'
        // }).then(({data}) => {
        //
        // })
      }
    },
    //获取要进行选座的电影信息
    getMovieInfo() {
      //1.获取vuex中选座页面的数据
      let chooseSeatPageData = this.$store.getters.getChooseSeatPageData
      //2.对象解构
      let {poster, movieInfo, cinemaInfo, fieldInfo} = chooseSeatPageData
      //3.封装数据到film中
      this.$set(this.film, 'cinema', cinemaInfo.cinemaName)
      this.$set(this.film, 'hall', fieldInfo.hall)
      this.$set(this.film, 'filmName', movieInfo.movieName)
      this.$set(this.film, 'filmType', movieInfo.movieTypes)
      this.$set(this.film, 'filmImg', poster.poster)
      this.$set(this.film, 'filmPrice', fieldInfo.price)
      this.$set(this.film, 'time', movieInfo.time)
      this.$set(this.film, 'movieLanguageVersion', fieldInfo.movieLanguageVersion)
      this.$set(this.film, 'session', fieldInfo.field + String(fieldInfo.showDate).split(' ')[1])
      this.$set(this.film, 'tickets', [])
    }
  },
}
</script>

<style scoped>
.movie-right {
  padding-top: 20px;
  padding-left: 30px;
  padding-bottom: 20px;
}

.movie-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.des {
  font-size: 14px;
  color: #999;
}

.type {
  font-size: 14px;
}

.content {
  font-size: 14px;
}

.item {
  margin-top: 20px;
}

.total-price {
  font-size: 25px;
  color: #F03D37;
  position: relative;
  top: 4px;
  font-weight: bold;
}

.money-icon {
  color: #F03D37;
  position: relative;
  top: 2px;
}

.ensure {
  margin-top: 30px;
}

.poster {
  width: 130px;
  height: 160px;
}

.choose-seat {
  height: 80px;
}

.choose-seat-des {
  font-size: 14px;
  margin-top: 30px;
  color: orange;
  margin-left: 30px;
}
</style>